<template>
  <div>
    <h2>ComA</h2>

    {{ props.ageModifiers }}

    <hr>

    uname <input type="text" :value="props.modelValue" @input="emit('update:modelValue', $event.target.value)">

    <hr>
    age <input type="text" :value="props.age"
      @input="emit('update:age', props.ageModifiers.number ? +$event.target.value : $event.target.value)">

    <hr>
    maxCunt <input type="text" :value="props.maxCount" @input="emit('update:max-count', $event.target.value)">
  </div>
</template>
<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps(['modelValue', 'age', 'maxCount', 'ageModifiers'])
const emit = defineEmits(['update:modelValue', 'update:age', 'update:max-count'])
</script>